<template>
  <div class="left-chart-3" >
    <div class="lc3-header">车辆报警排名</div>
    <div class="histogram_box">
      <ve-histogram :data="chartData" :extend="chartExtend"></ve-histogram>
      <!--    :settings="chartSettings" -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftChart3',
  data () {
    this.chartExtend = {
      grid: {
        left: '5%',
        right: '5%',
        top: '10%',
        bottom: '8%',
        containLabel: true
      },
      xAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#000'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07536a'
          }
        }
      },
      legend: {
        textStyle: {
          color: '#000'
        }
      },
      yAxis: {
        axisLabel: {
          show: true,
          textStyle: {
            color: '#945'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#07536a'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07536a'
          }
        }
      },
      series: {
        barWidth: 10
      },
      tooltip: {
        trigger: 'none'
      },
      toolbox: {
        // 工具箱
        show: true, // 是否显示工具栏组件。
        orient: 'horizontal', // 工具栏 icon 的布局朝向。'horizontal' 'vertical'
        itemSize: 12, // number 工具栏 icon 的大小。
        itemGap: 10, // 工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
        showTitle: true, // 是否在鼠标 hover 的时候显示每个工具 icon 的标题。
        // 各工具配置项 自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2：
        feature: {
          dataZoom: {
            // yAxisIndex: 'none'
          },
          // dataView: { readOnly: false }, // 数据视图
          magicType: { type: ['line', 'bar', 'stack', 'tiled'] },
          restore: {}, // 还原
          saveAsImage: {} // 保存图片
        }
      }
    }
    return {
      chartData: {
        columns: ['车牌', '报警数'],
        rows: [
          { 车牌: '闽F2', 报警数: 1 },
          { 车牌: '闽F2', 报警数: 12 },
          { 车牌: '闽F6', 报警数: 21 },
          { 车牌: '闽F9', 报警数: 41 },
          { 车牌: '闽F4', 报警数: 66 },
          { 车牌: '闽F6', 报警数: 71 }
        ]
      }
    }
  },
  mounted () {
    // this.$nextTick(() => {
    // this.initChart()
    // })
  },
  methods: {
    onhaha () {
      console.log(22)
    }
    // initChart () {
    //   // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
    //   this.chart = echarts.init(this.$el, 'macarons')
    //   // this.chart = echarts.init(this.$el)
    //   // 使用刚指定的配置项和数据显示图表。
    //   this.chart.setOption(this.option)
    // }
  }
}
</script>

<style lang="less" scoped>
.left-chart-3 {
  width: 100%;
  overflow: hidden;
  height: 29vh;
  margin-bottom: 1vh;
  flex-direction: column;
  .histogram_box {
    width: 100%;
    height: calc(100% - 20px);
    overflow: hidden;
  }
  .lc3-header {
    color: #fff;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    text-indent: 20px;
    margin-top: 10px;
  }

  .lc3-details {
    height: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    text-indent: 20px;

    span {
      color: #096dd9;
      font-weight: bold;
      font-size: 35px;
      margin-left: 20px;
    }
  }

  .lc3-chart {
    flex: 1;
  }
}
</style>
